<template>
  <view class="page">
    <image src="../../static/list.png" class="header-icon" @click="getList"></image>
    <text class="header" @click="getList">机柜列表</text>
    <image class="banner" src="../../static/banner.png"></image>

    <view class="container">
      <!-- User Information -->
      <view class="user">
        <uv-avatar src="../../static/logo.png"></uv-avatar>
        <view class="user-info">
          <text class="username">uniapp</text>
          <text class="deposit-status">我的押金：<text class="money-status">未缴纳</text></text>
        </view>
        <button style="width: 20%;height: 60rpx;background-color: #429998;"><text class="btn-text">付款</text></button>
      </view>

      <!-- Buttons Container -->
      <view class="buttons">
        <view class="row">
          <view class="button" style="background-color: #b68b6a;" @click="getBorrow">
            <text class="title">扫码借用</text>
            <text style="color: #d4afa0; margin-top: 10rpx;">便捷自主下单</text>
          </view>
          <view class="button" style="background-color: #bfd1d8;" @click="getOrder">
            <text class="title">借还记录</text>
            <text style="color: #e5edf1; margin-top: 10rpx;">查看订单</text>
          </view>
        </view>

        <view class="row">
          <view class="button btn-half-height" style="background-color: #c8b86d;" @click="getReturn">
            <text class="title" style="font-size: 35rpx; margin-bottom: 10rpx;">我要归还</text>
            <text style="color: #a74942;">{{number}}<text style="color: #eee5bb;font-size: 25rpx;">笔借用中</text></text>
          </view>
          <view class="button btn-quarter" style="background-color: #bfd1d8;">
            <text class="title" style="font-size: 30rpx;">计费规则</text>
          </view>
          <view class="button btn-quarter" style="background-color: #429998;">
            <text class="title" style="font-size: 30rpx;">使用帮助</text>
          </view>
        </view>
      </view>
    </view>
    <uni-section class="mb-10" title="物品列表" type="line">
      <view class="list-box">
        <view class="list">
          <image src="../../static/item/足球.jpg"></image>
          <p class="name">足球</p>
          <p>数量：5个</p>
        </view>
        <view class="list">
          <image src="../../static/item/篮球.jpeg"></image>
          <p class="name">篮球</p>
          <p>数量：1个</p>
        </view>
        <view class="list">
          <image src="../../static/item/排球.jpeg"></image>
          <p class="name">排球</p>
          <p>数量：1个</p>
        </view>
        <view class="list">
          <image src="../../static/item/羽毛球拍.jpeg"></image>
          <p class="name">羽毛球拍</p>
          <p>数量：1个</p>
        </view>
        <view class="list">
          <image src="../../static/item/跳绳.jpeg"></image>
          <p class="name">跳绳</p>
          <p>数量：1个</p>
        </view>

      </view>

    </uni-section>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        number: '0 '
      }
    },
    onLoad() {

    },
    methods: {
      getList() {
        uni.navigateTo({
          url: '/pages/sharelocklist/sharelocklist'
        })
      },
      getOrder() {
        uni.navigateTo({
          url: '/pages/sharelockerorder/sharelockerorder'
        })
      },
      getBorrow() {
        uni.navigateTo({
            url: '/pages/sharelockinformationsharelockinformation/sharelockinformation'
          }),
          // 允许从相机和相册扫码
          uni.scanCode({
            success: function(res) {
              console.log('借-条码类型：' + res.scanType);
              console.log('借-条码内容：' + res.result);
            }
          });
      },
      getReturn() {
        uni.navigateTo({
            url: '/pages/sharelockreturn/sharelockreturn'
          }),
          // 允许从相机和相册扫码
          uni.scanCode({
            success: function(res) {
              console.log('还-条码类型：' + res.scanType);
              console.log('还-条码内容：' + res.result);
            }
          });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    background-color: #efefef;
    // padding: 15px;
    position: relative;
  }

  .header {
    font-size: 25rpx;
    font-weight: 400;
    margin-bottom: 10px;
    position: absolute;
    top: 30rpx;
    left: 50rpx;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0);
    padding: 5px;
  }

  .header-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10px;
    top: 40rpx;
    left: 23rpx;
  }

  .banner {
    width: 100%;
    height: 350rpx;
  }

  .container {
    background-color: #fff;
    padding: 20px;
    border-radius: 40rpx 40rpx 0 0;
  }

  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 30px;
  }

  .user {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .user-info {
    flex: 1;
    margin-left: 15px;
  }

  .username {
    margin-bottom: 5px;
    font-weight: bold;
  }

  .username,
  .deposit-status {
    display: block;
    /* Ensure no margin or padding that could disrupt alignment */
    margin: 0;
    padding: 0;
  }

  .money-status {
    color: #c80000;
  }



  .buttons .row {
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
  }

  .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48%;
    height: 200rpx;
    border-radius: 10px;
    background-color: #008180;

    /* 3D 效果 */
    background-color: #d4e5c0;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
    /* bottom shadow */
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .button:active {
    transform: translateY(3px);
    /* slightly move button down */
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    /* reduce shadow size */
  }

  .btn-half-height {
    height: 150rpx;
  }

  .btn-quarter {
    width: 23%;
    height: 150rpx;

    /* considering 1% margin for aesthetics */
  }

  .btn-text {
    display: block;
    color: white;
    font-size: 30rpx;
    text-align: center;
    line-height: 60rpx;
    // margin-bottom: 0rpx;
  }

  .title {
    font-size: 35rpx;
    font-weight: bold;
    margin-top: 15rpx;
    color: #fff;
  }

  .list-box {
    margin-left: 50rpx;
    display: flex;
    justify-content: flex-start;
    // align-content: flex-start;
    flex-wrap: wrap;
  }

  .list {
    margin-right: 20rpx;
    margin-bottom: 30rpx;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-slef: center; // 水平居中内容
    // justify-content: start; // 从顶部开始放置内容
  }

  .list-box .list image {
    width: 200rpx;
    height: 200rpx;
  }

  .list .name {
    font-size: 30rpx;
    font-weight: 700;
    color: black;
  }

  .list p {
    color: #b4b4b4;
  }
</style>